'use strict';

var React = require('react');
var Router = require('react-router'); 

var CenterAuth = React.createClass({
  getInitialState : function(){
    return {
      isEdit : false,
      infos : {
        name : '张倩倩',
        sex : '女',
        phone: 12323465452,
        email : '8850088600@163.com',
        hospital : '北京市海淀医院',
        sections : '妇产科' ,
        post : ' 医师',
        jobtitle : '主治医师',
        cardNumber : 354135435435,
        cardPhoto : ''
      }
    };
  },
  handleSave : function(){

    this.setState({ isEdit : false });
  },
  handleEditSate : function(){
    this.setState({ isEdit : true });
  },
  handleNameChange : function(){
    var name  = this.ref.name.getDOMNode().value.trim();
    this.setState({ infos : { name : name }});
  },
  render: function() {
    var nameBox;
    var sexBox;
    var phoneBox;
    var emailBox;
    var hospitalBox;
    var sectionsBox;
    var postBox;
    var jobTitleBox;
    var cardNumberBox;
    var cardPhotoBox;
    var editButton;
    if(this.state.isEdit){
      nameBox =  <input type="text" className="do-input" id="form-name" value={this.state.infos.name} onChange={ this.handleNameChange } ref="name"/>;
      sexBox =  <input type="text" className="do-input" id="form-sex" value={this.state.infos.sex} />;
      phoneBox =  <input type="text" className="do-input" id="form-photo" value={this.state.infos.phone} />;
      emailBox =  <input type="text" className="do-input" id="form-email" value={this.state.infos.email} />;
      hospitalBox =  <input type="text" className="do-input" id="form-hospital" value={this.state.infos.hospital} />;
      sectionsBox =  <input type="text" className="do-input" id="form-sections" value={this.state.infos.sections} />;
      postBox =  <input type="text" className="do-input" id="form-post" value={this.state.infos.post} />;
      jobTitleBox =  <input type="text" className="do-input" id="form-jobtitle" value={this.state.infos.jobtitle} />;
      cardNumberBox =  <input type="text" className="do-input" id="form-cardnum" value={this.state.infos.cardNumber} />;
      cardPhotoBox =  <a href="javascript:;" className="do-btn do-btn-default do-btn-sm">重新上传</a>;
      editButton = <a href="javascript:;" className="do-btn do-btn-success do-btn-md" onClick={ this.handleSave }>保存</a>;
    }else{
      nameBox = this.state.infos.name;
      sexBox = this.state.infos.sex;
      phoneBox = this.state.infos.phone;
      emailBox = this.state.infos.email;
      hospitalBox = this.state.infos.hospital;
      sectionsBox = this.state.infos.sections;
      postBox = this.state.infos.post;
      jobTitleBox = this.state.infos.jobtitle;
      cardNumberBox = this.state.infos.cardNumber;
      cardPhotoBox =  <img src={ this.state.infos.cardPhoto } title="证件照片" alt="证件照片" className="do-form-img"/>;
      editButton = <a href="javascript:;" className="do-btn do-btn-success do-btn-md" onClick={ this.handleEditSate }>编辑</a>;
    }

    return (
	/* jshint ignore:start */
		<div className="do-p-lg">
			<div className="do-form-group">
            <label className="do-control-label" htmlFor="form-name">姓名 :</label>
            <div className="do-form-input">
              { nameBox }
            </div>
        </div>
        <div className="do-form-group">
            <label className="do-control-label" htmlFor="form-sex">性别 :</label>
            <div className="do-form-input">
              { sexBox }
            </div>
        </div>
        <div className="do-form-group">
            <label className="do-control-label" htmlFor="form-phone">电话号码 :</label>
            <div className="do-form-input">
              { phoneBox }
            </div>
        </div>
        <div className="do-form-group">
            <label className="do-control-label" htmlFor="form-email">电子邮箱 :</label>
            <div className="do-form-input">
              { emailBox }
            </div>
        </div>
        <div className="do-form-group">
            <label className="do-control-label" htmlFor="form-hospital">所在医院 :</label>
            <div className="do-form-input">
              { hospitalBox }
            </div>
        </div>
        <div className="do-form-group">
            <label className="do-control-label" htmlFor="form-sections">所在科室 :</label>
            <div className="do-form-input">
              { sectionsBox }
            </div>
        </div>
        <div className="do-form-group">
            <label className="do-control-label" htmlFor="form-post">岗位 :</label>
            <div className="do-form-input">
              { postBox }
            </div>
        </div>
        <div className="do-form-group">
            <label className="do-control-label" htmlFor="form-jobtitle">职称 :</label>
            <div className="do-form-input">
              { jobTitleBox }
            </div>
        </div>
        <div className="do-form-group">
            <label className="do-control-label" htmlFor="form-cardnum">职业证件号码 :</label>
            <div className="do-form-input">
              { cardNumberBox }
            </div>
        </div>
        <div className="do-form-group">
            <label className="do-control-label">证件照片 :</label>
            <div className="do-form-input">
              { cardPhotoBox }
            </div>
        </div>
        <div className="do-form-group">
          { editButton }
        </div>
		</div>
	/* jshint ignore:end */
    );
  }
});

module.exports =CenterAuth;
